<template>
  <view class="body">
    <view class="titleContent">
      <text class="title">生猪管理系统</text>
      <view class="user-area">
        <text class="user">当前账号：用户名</text>
      </view>
      <button class="task">+ 订制任务发布</button>
    </view>

    <view class="unprocessed">
      <view class="unprocessed-plan">
        <view class="plan-title">
          <text>待处理关键计划</text>
          <text>去处理></text>
        </view>
        <view class="plan-detail">
          <text>妊娠计划：10条</text>
          <text>分娩计划：10条</text>
          <text>断奶计划：10条</text>
        </view>
      </view>
    </view>

    <view class="pendingWarning">
      <view class="warning-title">
        <text>待处理预警（10条）</text>
        <text>查看详情></text>
      </view>
      <view id="pendingWarningChart" class="pending-warning-chart" ></view>
    </view>

    <view class="content">
      <view class="personal-task">
        <view class="task-title">
          <text>今日个人任务（2条）</text>
          <text>查看详情></text>
        </view>
        <view id="personalTaskChart" class="personal-task-chart" ></view>
      </view>
      <view class="advisory-notice">
        <text class="notice-title">咨询公告</text>
        <view class="notice-content">
          <text class="price-title">今日猪价</text>
          <view class="pig-price">
            <text class="price-detail">公猪XXX元/斤</text>
            <text class="price-detail">母猪XXX元/斤</text>
            <text class="price-detail">育肥猪XXX元/斤</text>
          </view>
          <view class="today-pigNews">
            <text class="pigNews-title">今日猪讯</text>
            <text>今日全国猪价整体稳中有降。东北、华北、华中地区价格相对稳定，但需求有限，市场情绪偏弱，东北散户抵触低价，散户低价有小幅上涨。华东、华南、西南地区价格略有下跌，养殖端出栏增加，终端需求不足，猪价继续下滑。全国整体供需博弈，需求偏弱，难以支撑猪价止跌。</text>

          </view>
        </view>
      </view>
    </view>

  </view>



</template>


<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {

    };
  },
  onReady() {
    this.initPendingWarningChart();
    this.initPersonalTaskChart();
  },
  methods: {
    initPendingWarningChart() {
      let chartDom = document.getElementById("pendingWarningChart");
      let myChart = echarts.init(chartDom);
      const option = this.getPendingWarningChartOption();
      option && myChart.setOption(option);
    },
    getPendingWarningChartOption() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Pending Warning',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 10, name: '未处理' },
              { value: 15, name: '已处理' }
            ]
          }
        ]
      };
      return option;
    },

    initPersonalTaskChart()
    {
      let chartDom = document.getElementById("personalTaskChart");
      let myChart = echarts.init(chartDom);
      const option = this.getPersonalTaskChartOption();
      option && myChart.setOption(option);
    },

    getPersonalTaskChartOption(){
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Personal Task',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 10, name: '待完成' },
              { value: 15, name: '已完成' }
            ]
          }
        ]
      };
      return option;
    }

  }
}
</script>


<style>
.body{
  background-color: white;
}

.titleContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: blue;
  color: white;
}



.user-area {
  display: flex;
  justify-content: center;
  width:100%;
}
.user{
  font-size: 30rpx;
  width: 100%;
  padding: 20rpx;
}

.title {
  font-size: 40rpx;
  color: white;
  width: 100%;
  text-align:center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.task{
  font-size: 32rpx;
  color: white;
  /* padding: 5rpx 20rpx; */
  background-color: #009dff;
  width: 50%;
  height: 80rpx;
  margin-bottom: 30rpx;
}
.unprocessed{
  margin-top: 60rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 60rpx;
}

.unprocessed-plan{
  display: flex;
  padding:10rpx;
  flex-direction: column;
  color: white;
  border-radius: 20rpx;
  background-color: #009dff;
  /* height: 150rpx; */
}

.plan-title{
  font-size:35rpx;
  display: flex;
  justify-content: space-between;
  padding: 10rpx;
  height: 50rpx;
}

.plan-detail{
  font-size: 28rpx;
  display: flex;
  justify-content: space-evenly;
  padding: 10rpx;
}
.warning-title{
  font-size: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  color: black;
}
.pending-warning-chart{
  padding-left: 50rpx;
  width: 600rpx;
  height: 400rpx;
}
.pendingWarning{
  border: 1px solid black;
  color: white;
  display: flex;
  flex-direction:column;
  justify-content: center;
  margin-left:30rpx;
  margin-right: 30rpx;
}
.personal-task{
  border-bottom: 1px solid black;
  display: flex;
  flex-direction:column;
  justify-content: center;

}
.content{
  border: 1px solid black;
  margin-left:30rpx;
  margin-right: 30rpx;
  margin-top: 40rpx;
}
.task-title{
  font-size: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  color: black;
}
.personal-task-chart{
  width: 600rpx;
  height: 400rpx;
  padding-left: 50rpx;
}
.advisory-notice{
  height: 800rpx;
}

.notice-title{
  display: block;
  padding: 10rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  width: 93%;
}
.notice-content{
  border: 1rpx solid black;
  margin-left: 35rpx;
  margin-right: 35rpx;

}
.price-title{
  font-size: 35rpx;
  display: block;
  margin-left: 20rpx;
  margin-top: 20rpx;
  padding: 10rpx;

}
.pig-price{
  text-align: center;
  display: flex;
  flex-direction:column;
  justify-content: center;
  width: 90%;
  margin: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid black;

}
.price-detail{
  font-size: 30rpx;
  width: 100%;
  margin: 5rpx;
  text-align: center;
}
.today-pigNews{
  margin: 30rpx;
  display: flex;
  width: 90%;
  flex-direction:column;
}
.pigNews-title{
  font-size: 35rpx;
  padding: 10rpx;
}
</style>
